<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英雄列表</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <style>
        input,
        button {
            outline: none !important;
        }

        .container {
            width: 1000px;
        }

        .panel {
            margin-top: 120px;
        }

        .input-group {
            margin-top: 12px;
        }

        .input-group input {
            padding: 0 14px;
            font-size: 18px !important;
            color: black;
        }

        .btn.btn-success {
            font-size: 20px;
            padding: 10px 20px;
        }

        table {
            border-collapse: collapse;
            vertical-align: middle;
        }

        .table tbody tr td img {
            width: 80px;
            /* height: 50px; */
        }

        tr th {
            padding: 15px 0 !important;
        }

        tr th,
        tr td {
            width: 19%;
            text-align: center;
            border: none !important;
        }

        tr {
            border-top: 1px solid #ccc;
            display: flex;
            align-items: center;
        }

        td.error {
            flex: 1;
            padding: 30px 0 !important;
            text-align: center;
            font-size: 20px;
        }

        #showAll {
            font-size: 16px;
            padding: 2px 10px;
            margin-top: 20px;
            margin-left: 20px;
            background-color: rgba(160, 81, 45, 0.671);
            border: none;
        }

        #showAll:hover {
            background-color: sienna;
        }
    </style>
</head>

<body>
    <!-- HTML -->
    <div class="container">
        <div class="panel panel-primary">
            <!-- Default panel contents -->
            <div class="panel-heading">英雄列表管理</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="请输入要搜索的英雄名称" id="searchTxt">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" id="searchBtn">搜索</button>
                            </span>
                        </div><!-- /input-group -->
                    </div><!-- /.col-lg-6 -->
                    <div class="col-lg-2">
                        <button type="button" class="btn btn-success" id="showAll">显示全部</button>
                    </div>
                    <div class="col-lg-offset-2 col-lg-2">
                        <button type="button" class="btn btn-success" data-toggle="modal"
                            data-target="#myModal">添加英雄</button>
                    </div>
                </div><!-- /.row -->
            </div>

            <!-- Table -->
            <table class="table">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>英雄名</th>
                        <th>性别</th>
                        <th>头像</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>马大师</td>
                        <td>男</td>
                        <td><img src="./images/mabaoguo.png" alt=""></td>
                        <td>
                            <button type="button" class="btn btn-info">上传头像</button>
                            <button type="button" class="btn btn-danger">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 2、新增英雄静态布局-开始 -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">添加英雄</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="addHeroForm">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">英雄名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="name" required="required"
                                    placeholder="输入英雄名...">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">英雄性别</label>
                            <div class="col-sm-10">

                                <div class="form-group">
                                    <div class="col-sm-10">
                                        <select name="gender" id="inputgender" class="form-control" required="required">
                                            <option value="">-- 请选择 --</option>
                                            <option value="男">男</option>
                                            <option value="女">女</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" id="addHero" class="btn btn-success">提交</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal"
                                    id='closeAddHero'>关闭</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">

                </div>
            </div>
        </div>
    </div>
    <!-- 2、新增英雄静态布局-结束 -->

    <!-- 3、上传头像静态布局-开始 -->
    <div class="modal fade" id="uploadModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">上传头像</h4>
                </div>
                <div class="modal-body">
                    <input type="file" id="file_name">
                </div>
                <div class="modal-body">
                    <button type="button" id="uploadBtn" class="btn btn-primary">提交</button>
                    <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>
    <!-- 3、上传头像静态布局-结束 -->

    <!-- HTML -->


    <!-- JavaScript -->
    <script src="./js/jquery.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <script>
        // 入口函数：
        $(function () {

            $('#searchTxt').focus();


            get_list();    // 页面刷新自动调用一次  （作用：渲染列表）


            search_hero();    // 查询英雄

            // 删除英雄的事件绑定：已在动态渲染列表中以行内绑定事件的方式完成

            showAll();    // 显示全部英雄

            addHero()    // 添加英雄


        });  // 入口函数


        // 定义函数： 获取英雄列表
        function get_list() {

            // 如果搜索框没有内容, 不请求ajax
            // 页面刷新渲染一次，由于搜索按钮没有触发点击，故没有data-flag这个属性    所以这条if不会执行
            // 如果点击了搜索按钮，给其添加了data-flag属性
            // 1. 按钮被点击过    2. 搜索框值为空        如果同时满足这两个条件，就执行下面的if语句
            if ($('#searchBtn').attr('data-flag') == '1' && $('#searchTxt').val().trim() == '') {
                console.log(2);
                return;
            }

            // ajax请求
            $.ajax({
                type: 'GET',
                url: 'http://127.0.0.1:3001/getHeroList',
                data: { heroName: $('#searchTxt').val() },
                success: function (resData) {
                    // console.log('get_listAjax成功');
                    // 如果获取的data数据为空
                    if (resData.data.length == 0) {
                        let resList = `
                        <tr>
                            <td class='error'>我不知道你在搜些什么</td>
                        </tr>
                        `
                        $('tbody').html(resList);
                    } else {
                        let resList = ''
                        resData.data.forEach(item => {
                            resList += `
                        <tr>
                            <td>${item.id}</td>
                            <td>${item.name}</td>
                            <td>${item.gender}</td>
                            <td><img src=${item.img} alt=""></td>
                            <td>
                                <button onclick='showUpload(${item.id})' type="button" class="btn btn-info">上传头像</button>
                                <button onclick='del_hero(${item.id})' type="button" class="btn btn-danger">删除</button>
                            </td>
                        </tr>
                        `
                            $('tbody').html(resList);
                        })
                    }
                }
            })
        };

        // 定义函数：查询英雄
        function search_hero() {
            // 搜索按钮事件：
            $('#searchBtn').click(function () {
                // 点击了搜索按钮之后，给该标签添加个data-flag属性    （作用：识别按钮是否点击过）
                $('#searchBtn').attr('data-flag', '1')
                get_list()
                $('#searchTxt').val('');
            })

            // 回车键: "给我也整一个"
            $(document).keyup(function (e) {
                if (e.keyCode == 13) {
                    $('#searchBtn').attr('data-flag', '1')
                    get_list()
                    $('#searchTxt').val('');
                }
            })
        }

        // 定义函数： 删除英雄
        function del_hero(id) {
            // 获取英雄信息, 检查英雄数量是否为1, 如果为1 就不允许用户再进行删除操作
            $.ajax({
                type: 'GET',
                url: 'http://127.0.0.1:3001/getHeroList',
                data: null,
                success: function (resData) {
                    if (resData.data.length == 1) {
                        alert('至少要留下一个英雄信息');
                    } else {
                        $.ajax({
                            type: 'GET',
                            url: 'http://127.0.0.1:3001/delHeroById',
                            data: { id },      // 如果属性名和属性值相同，可用该写法    意为：{id: id}
                            success: function (resData) {
                                get_list();
                            }
                        });
                    }
                }
            });
        };

        // 定义函数： 显示全部英雄
        function showAll() {
            $('#showAll').click(function () {
                $('#searchBtn').attr('data-flag', '2');
                $('#searchTxt').val('');
                console.log($('#searchBtn').attr('data-flag'));
                get_list();
            })
        }

        // 定义函数： 添加英雄
        function addHero() {
            $('#addHeroForm').submit(function (e) {
                // 阻止默认提交  待会儿使用Ajax进行提交
                e.preventDefault();
                // serialize方法： 将form表单中接收到的数据转换成一种特殊字符串的格式
                let resData = $(this).serialize();
                resData += '&img=""'    // img传入方式需要独立处理, 这里先为数据添加个空值的img
                console.log(resData);
                $.ajax({
                    type: 'POST',
                    url: 'http://127.0.0.1:3001/addHero',
                    data: resData,
                    success: function (resData) {
                        // 添加成功之后, 自动调用关闭模态框
                        $('#myModal').modal('hide');
                        get_list();
                    }
                })
            })
        }

        // 定义函数： 显示上传文件框框
        function showUpload(id) {
            $('#uploadModal').modal('show')
            upload(id)    // 提交上传
        }

        // 定义函数： 提交上传
        function upload(id) {
            $('#uploadBtn').click(function () {
                // 当点击了上传提交按钮之后, 把上传的文件用变量保存
                let file = document.querySelector('#file_name').files[0];
                // 如果用户没有上传文件, 终止该函数运行 并提示用户未上传文件
                if (!file) {
                    alert('你没有选择文件')
                    return;
                }

                // 由于图片上传不是一种字符串数据类型, 所以要将上传文件转为二进制数据
                // new FormData() 是HTML5新增的一种对象, 用来接收二进制数据, 用  实例.append('属性名': '属性值')  的方式传入数据
                let formdata = new FormData();
                formdata.append('file_data', file)
                // Ajax请求：上传文件
                $.ajax({
                    type: 'POST',
                    url: 'http://127.0.0.1:3001/uploadFile',
                    data: formdata,
                    contentType: false,
                    processData: false,
                    success: function (resData_Post) {
                        // 上传成功返回一个对象, 对象.src 就是上传文件的访问路径
                        let imgSrc = resData_Post.src
                        // Ajax请求：获取单个英雄
                        $.ajax({
                            type: 'GET',
                            url: 'http://127.0.0.1:3001/getHeroById',
                            data: { id },
                            success: function (resData_Get) {
                                console.log(resData_Get.data);
                                // Ajax请求：更新数据
                                $.ajax({
                                    type: 'POST',
                                    url: 'http://127.0.0.1:3001/updateHero',
                                    data: {
                                        id: resData_Get.data.id,
                                        name: resData_Get.data.name,
                                        gender: resData_Get.data.gender,
                                        img: imgSrc
                                    },
                                    success: function (resData_Updata) {
                                        // 请求成功后渲染一次列表
                                        $('#searchBtn').attr('data-flag', '2');
                                        get_list();
                                        // 关闭上传框
                                        $('#uploadModal').modal('hide');
                                    }
                                })
                            }
                        })
                    }
                })
            })
        }

    </script>

</body>

</html>